<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-07-20 11:26:35
 * @LastEditors: 商晓彬
 * @LastEditTime: 2022-02-16 09:30:27
-->
<div class="approval">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>审批流程配置</span>
                </h3>
            </div>
        </div>
    </div>
    <div style="width: 100%;">
        <div class="ui-g">
            <div class="ui-g-3">
                <div class="primeng-datatable-container" style="background-color: #fff;padding: 5px;height: 781px;">
                    <div style="font-size: 15px;margin: 5px 0px 5px 5px;">审批类型</div>
                    <hr style="border: 0.1px solid	#DDDDDD ;margin: auto;width: 90%;margin-bottom: 10px;">
                    <p-table #typeData [value]="primengTableHelper.records" (onLazyLoad)="getTypeTableList($event)"
                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                        [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                        [resizableColumns]="primengTableHelper.resizableColumns" selectionMode="single"
                        [(selection)]="selected">
                        <ng-template pTemplate="header" let-columns>
                            <tr>
                                <th *ngFor="let col of columns">
                                    {{col.header}}
                                </th>
                                <th style="width: 180px;height: 34px;">功能模块</th>
                                <th style="width: 180px;height: 34px;">审批类型</th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                            <tr (click)="searchMap(record)" [pSelectableRow]="record">
                                <td *ngFor="let col of columns">
                                    {{record[col.field]}}
                                </td>
                                <td style="width: 180px;height: 34px;">{{record.wfRemark}}</td>
                                <td style="width: 180px;height: 34px;">{{record.wfName}}</td>
                            </tr>
                        </ng-template>
                    </p-table>
                    <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #typePaginator
                            (onPageChange)="getTypeTableList($event)"
                            [totalRecords]="primengTableHelper.totalRecordsCount"
                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                        </p-paginator>
                        <span class="total-records-count">
                            {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                        </span>
                    </div>
                </div>
            </div>
            <div class="ui-g-9" style="position: relative;" *ngIf="selected">
                <div class="item-content" style="position: absolute;top: 7px; left: 25px;z-index: 999;">
                    <p-button *ngIf="'Pages.ApprovalConfiguration.SaveProcess' | permission" label="保存当前审批流程" (onClick)="saveApproval()"></p-button>
                </div>
                <div class="flow">
                    <div class="flow-item">
                        <div class="flow-start">
                            <div class="text">流程开始</div>
                            <div class="ico"></div>
                            <div class="flow-add">
                                <div (click)="addFirst()" class="flow-add__plus"><i style="font-size: 2rem;"
                                        class="pi pi-plus-circle"></i></div>
                            </div>
                        </div>
                        <div class="content">
                            <div class="flow-node" *ngFor="let item of approvalForm ; let index=index">
                                <div class="flow-content">
                                    <div class="title">
                                        <i class="pi pi-user"></i>
                                        <span style="margin-left: .625rem;">节点:{{item.label}}</span>
                                        <i (click)="deleteNode(index)" class="pi pi-times"
                                            style="float: right;cursor: pointer"></i>
                                    </div>
                                    <div class="content">
                                        <span>角色：{{item.roleName}}</span>
                                        <i style="cursor: pointer;" (click)="showDetail(item,index)"
                                            class="pi pi-chevron-right"></i>
                                    </div>
                                </div>
                                <div class="flow-add">
                                    <div (click)="addFirst(index)" class="flow-add__plus"><i style="font-size: 2rem;"
                                            class="pi pi-plus-circle"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="flow-end">
                            <div class="ico"></div>
                            <div class="text">流程结束</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 节点弹窗 -->
    <p-sidebar [(visible)]="nodeFlag" position="right" [baseZIndex]="10000" (onHide)="onHide($event)"
        [style]="{width:'30em'}">
        <h3 style="font-weight:normal;color: #888888;">审批</h3>
        <hr style="border: 1px solid #DDDDDD;width: 100%;">
        <form *ngIf="active" #nodeForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
            <div class="modal-boday">
                <div class="form-group" style="display: flex;">
                    <label style="margin-right: 20px; margin-top: 5px;" for="label">节点名称*：</label>
                    <input style="width: 200px;" id="formLabel" name="formLabel" #nodeLabelInput="ngModel" type="text" class="form-control"
                        [(ngModel)]="deatilForm.label" required maxlength="256" />
                    <validation-messages [formCtrl]="nodeLabelInput"></validation-messages>
                </div>
                <div class="form-group">
                    <p-triStateCheckbox name="choose" [(ngModel)]="deatilForm.choose" label="审批角色"></p-triStateCheckbox>
                </div>
                <div class="form-group">
                    <label for="approvalRole" style="margin-top: 7px;margin-right: 20px;">审批角色*：</label>
                    <p-dropdown required name="approvalRole" #approvalRoleSelect="ngModel"
                        [options]="approvalRoleOption" [(ngModel)]="deatilForm.approvalRole">
                        <ng-template let-select pTemplate="selectedItem">
                            <span style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                        </ng-template>
                        <ng-template let-select pTemplate="select">
                            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">{{select.label}}
                                </div>
                            </div>
                        </ng-template>
                    </p-dropdown>
                    <validation-messages [formCtrl]="approvalRoleSelect"></validation-messages>
                </div>
                <div class="form-group" style="display: flex;">
                    <label style="margin-right: 28px; margin-top: 5px;" for="remark">角色备注：</label>
                    <input style="width: 200px;" name="remark" type="text" class="form-control"
                        [(ngModel)]="deatilForm.remark" maxlength="256" />
                </div>
            </div>
            <div class="modal-footer" style="justify-content: center;">
                <p-button label="取消" (onClick)="nodeFlag = false"></p-button>
                <p-button label="保存" type="submit" [disabled]="!nodeForm.form.valid"></p-button>
            </div>
        </form>
    </p-sidebar>
</div>